<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow title="编辑资料" @click-left="$router.back()" />

    <!-- 编辑区 -->
    <van-cell-group>
      <!-- 头像 -->
      <div class="avatar">
        <van-image
          fit="cover"
          round
          :src="user.photo"
        />
        <!-- 先导入并注册uploader组件  文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象-->
        <van-uploader
          class="upload"
          :after-read="afterRead"
        />
      </div>
      <van-cell is-link title="名称" :value="user.name" @click="showName=true" />
      <van-cell is-link title="性别" :value="user.gender === 1 ? '女' :'男'" @click="showGender=true" />
      <van-cell is-link title="生日" :value="user.birthday" @click="showBirthday=true" />
    </van-cell-group>
    <!-- 编辑昵称 组件方式调用 dialog-->
    <van-dialog v-model="showName" title="修改名称" show-cancel-button @confirm="saveName" @open="openDialog">
      <van-field v-model.trim="userName" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar title="修改性别" left-text="取消" @click-left="showGender=false" />
      <van-cell title="男" is-link @click="saveGender(0)" />
      <van-cell title="女" is-link @click="saveGender(1)" />
    </van-popup>
    <van-popup v-model="showBirthday" position="bottom">
      <!-- 日期选择组件
        通过 min-date 和 max-date 属性可以确定可选的时间范围, 是日期对象
        currentDate 日期组件默认关联的时间 是一个日期对象, 展示的当前用户的生日时间
      -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="saveBirthday"
        @cancel="showBirthday = false"
      />
    </van-popup>
    <!-- 头像裁切的弹出层 -->
    <div v-if="isShowMask" class="mask">
      <!-- img 属性就是要裁切的图片对应的地址
        auto-crop 裁切框展示
        fixed 固定比例裁切框
        auto-crop-width 宽度
        auto-crop-height 高度
         -->
      <vueCropper
        ref="cropper"
        :img="url"
        auto-crop
        fixed
        auto-crop-width="200"
        auto-crop-height="200"
      />
      <van-button type="primary" class="confirm" @click="crop">
        确定
      </van-button>
      <van-button
        type="primary"
        class="cancel"
        @click="isShowMask = false"
      >取消</van-button>
    </div>
  </div>
</template>

<script>
//
import { reqGetUserInfo, reqUpdateUserProfile, reqUpdatePhoto } from '@/api/user'
// 导入图片裁切组件 并挂载
import { VueCropper } from 'vue-cropper'
import dayjs from 'dayjs'
export default {
  name: 'UserProfile',
  components: {
    VueCropper
  },
  data() {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      userName: '',
      minDate: new Date('1970-01-01'),
      maxDate: new Date(),
      currentDate: new Date(), // 默认展示的日期 应该是要展示用户的生日的
      isShowMask: false,
      url: ''
    }
  },
  created() {
    this.getUserProfile()
  },
  methods: {
    // 获取个人信息的方法
    async getUserProfile() {
      const { data: { data }} = await reqGetUserInfo()
      // console.log(res)
      this.user = data
      // 请求回数据后 将currentDate 赋值 但是要数据格式
      this.currentDate = new Date(this.user.birthday)
    },
    // 监听对话框的打开事件
    openDialog() {
      this.userName = this.user.name
    },
    // 保存昵称提交
    async saveName() {
      // 长度校验
      if (this.userName.length < 1 || this.userName.length > 7) return this.$toast('昵称长度不合法')
      // 发送请求
      try {
        const { data: { data: { name }}} = await reqUpdateUserProfile({ name: this.userName })
        // console.log(res)
        // 提示修改成功
        this.$toast.success('修改成功')
        // 更新视图即可
        this.user.name = name
      } catch (error) {
        // 昵称重复了
        this.$toast.fail('昵称已存在')
      }
    },
    // 保存性别提交
    async saveGender(gender) {
      await reqUpdateUserProfile({ gender })
      // ---接口问题,只要改过是女的就永远是女的了---
      // 提示用户
      this.$toast.success('修改成功')
      // 更新视图
      this.user.gender = gender
      // 关闭弹出层
      this.showGender = false
    },
    // 保存生日提交
    async saveBirthday() {
      // currentDate是一个日期对象, 要提交给服务器的数据是字符串的日期格式 '2020-02-10'
      const birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
      // 1. 发送请求
      await reqUpdateUserProfile({ birthday })
      // 2. 关闭弹层
      this.showBirthday = false
      // 3. 提示用户
      this.$toast.success('更新成功')
      // 4. 更新视图
      this.user.birthday = birthday
    },
    // 点击头像触发file的点击事件
    // clickHandle() {
    //   this.$refs.file.click()
    // },
    // // 选择文件
    // async changeFile(e) {
    //   // 7. 添加loading,禁止用户重复点击
    //   this.$toast.loading({
    //     message: '上传中...', // 加载提示文本
    //     overlay: true, // 灰色遮罩
    //     forbidClick: true, // 禁止背景点击
    //     duration: 0 // 展示时长设置为0 表示一直显示
    //   })
    //   // 1. 获取上传的文件
    //   const file = e.target.files[0]
    //   // 2.文件预校验工作  大小限制  类型限制
    //   // 16576567 / 1024  k
    //   // 16576567 / 1024 / 1024 M
    //   if (file.size / 1024 / 1024 > 5) {
    //     return this.$toast.fail('图片过大')
    //   }
    //   // svg jpg png gif bmp
    //   /*   const arr = ['image/svg', 'image/png', 'image/jpeg', 'image/bmp']
    //   if (!arr.includes(file.type)) {
    //     return this.$toast.fail('图片类型错误')
    //   } */
    //   // 3. 发送请求
    //   // 3.1 使用formData收集信息
    //   const fm = new FormData()
    //   fm.append('photo', file)
    //   // console.log(fm.get('photo'))
    //   // 3.2 发送请求
    //   try {
    //     const { data: { data: { photo }}} = await reqUpdatePhoto(fm)
    //     console.log(photo)
    //     // 4. 更新视图
    //     this.user.photo = photo
    //     // 5. 提示用户
    //     this.$toast.success('更新成功')
    //     // 一般会在最后面将value值清空
    //     e.target.value = ''
    //   } catch (error) {
    //     this.$toast.success('更新失败')
    //   }
    // },
    // 文件读取完毕后会触发这个方法, 有一个参数file
    afterRead(file) {
      console.log(file)
      this.url = file.content
      // 上传后 展示弹出层
      this.isShowMask = true
    },
    // 点击确定获取到裁切的图片裁切图片
    crop() {
      this.$refs.cropper.getCropBlob(async(data) => {
        // console.log(data) // 要提交的裁切的数据
        // 1.收集到formdata中
        const fm = new FormData()
        fm.append('photo', data)
        // 2.发送请求
        try {
          const { data: { data: { photo }}} = await reqUpdatePhoto(fm)
          console.log(photo)
          // 3.更新视图
          this.user.photo = photo
          // 4.提示用户
          this.$toast.success('更新成功')
          // 5关闭弹出层
          this.isShowMask = false
        } catch (error) {
          this.$toast.success('更新失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  padding: 20px 0;
  text-align: center;
  position: relative;
  .van-image {
    width: 120px;
    height: 120px;
  }
  .upload {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    ::v-deep {
      .van-uploader__input {
        width: 120px;
        height: 120px;
      }
    }
  }
}
.profile {
  ::v-deep {
    .van-dialog__content {
      padding: 10px;
      .van-field {
        border: 1px solid #ccc;
      }
    }
  }
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .confirm,
  .cancel {
    position: absolute;
    bottom: 0;
  }
  .confirm {
    left: 0;
  }
  .cancel {
    right: 0;
  }
}
</style>
